import "./index.css";
import case4 from '../assets/case5copy.png'
import case2 from '../assets/case2.jpeg'
import { dataPankou } from "./data";
import { Modal } from "antd";
import { useEffect, useState } from "react";

export default function QygContent() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [gameTime, setGameTime] = useState("2:00");
  const [zhuboName, setZhuboName] = useState("大司马");
  const [zhuName, setZhuName] = useState("利物浦");
  const [keName, setKeName] = useState("阿森纳");
  const [payMsg, setpayMsg] = useState("");
  const [videoSrc, setVideoSrc] = useState(case4);
  const [currentPankou, setCurrentPankou] = useState("");

  const showModal = (item) => {
    setCurrentPankou(item);
    setIsModalOpen(true);
  };

  useEffect(() => {
    console.log(`${zhuboName}2分钟后下播`);
    setTimeout(() => {
      setGameTime("全场结束");
      setZhuboName("宝哥");
      setZhuName("热刺");
      setKeName("切尔西");
      setVideoSrc(case2);

      setTimeout(() => {
        setGameTime("0:11");
        setZhuboName("大司马");
        setZhuName("曼城");
        setKeName("曼联");
        setVideoSrc(case4);
      }, 60 * 1000);
    }, 30 * 1000);
  }, []);

  const handleOk = () => {
    setpayMsg("");
    setTimeout(() => {
      const random = Math.floor(Math.random() * (6 - 1 + 1)) + 1;
      if (random < 6) {
        // 弹出成功
        setpayMsg("投注成功");
        return;
      }
      if (random >= 6) {
        setpayMsg("网络超时");
        return;
      }
      // setpayMsg("投注不成功");
    }, 3 * 1000);
  };

  const handleCancel = () => {
    setpayMsg("");
    setCurrentPankou("");
    setIsModalOpen(false);
  };

  return (
    <div style={{ display: "flex", justifyContent: "start" }}>
      <div className="left">
        <div style={{ marginLeft: 400 }}>
          <div className="card_list" style={{ display: "flex" }}>
            <li className="card_list_item">
              <div className="vw_between_center card_item_header">
                <div className="vw_left_center">
                  <p className="text_ellip">墨西哥女子联赛</p>
                </div>
                <div className="vw_right_center">
                  <p></p>
                  <p className="icon_anchor mgl-5">
                    <span
                      className="icon_anchor--line"
                      data-v-0a742dfc=""
                    ></span>
                  </p>
                </div>
              </div>
              <div className="card_item_info" data-v-0a742dfc="">
                <div className="card_item_liveAnchor" data-v-0a742dfc="">
                  <div className="el-image live_img" data-v-0a742dfc="">
                    <img
                      className="el-image__inner"
                      src="ypt/static//upload/file/2024/0620/a43d498f681c4e9e9240cfb7e478851d.jpg?noHome=1"
                    />
                  </div>
                  <div
                    className="card-item-pk-live-icon"
                    data-v-0a742dfc=""
                  ></div>
                </div>
                <div className="card_item_liveTitle" data-v-0a742dfc="">
                  <p
                    className="text_ellip card_liveTitle_title"
                    data-v-0a742dfc=""
                  >
                    瓜达拉哈拉奇瓦斯 (女) VS 蓝十字 (女)
                  </p>
                  <p
                    className="text_ellip card_liveTitle_anchorName"
                    data-v-0a742dfc=""
                  >
                    {zhuboName}
                  </p>
                </div>
              </div>
            </li>
            <li className="card_list_item active">
              <div className="vw_between_center card_item_header">
                <div className="vw_left_center">
                  <p className="text_ellip">墨西哥女子联赛</p>
                </div>
                <div className="vw_right_center">
                  <p></p>
                  <p className="icon_anchor mgl-5">
                    <span
                      className="icon_anchor--line"
                      data-v-0a742dfc=""
                    ></span>
                  </p>
                </div>
              </div>
              <div className="card_item_info" data-v-0a742dfc="">
                <div className="card_item_liveAnchor" data-v-0a742dfc="">
                  <div className="el-image live_img" data-v-0a742dfc="">
                    <img
                      className="el-image__inner"
                      src="ypt/static//upload/file/2024/0620/a43d498f681c4e9e9240cfb7e478851d.jpg?noHome=1"
                    />
                  </div>
                  <div
                    className="card-item-pk-live-icon"
                    data-v-0a742dfc=""
                  ></div>
                </div>
                <div className="card_item_liveTitle" data-v-0a742dfc="">
                  <p
                    className="text_ellip card_liveTitle_title"
                    data-v-0a742dfc=""
                  >
                    瓜达拉哈拉奇瓦斯 (女) VS 蓝十字 (女)
                  </p>
                  <p
                    className="text_ellip card_liveTitle_anchorName"
                    data-v-0a742dfc=""
                  >
                    主播名：宝哥
                  </p>
                </div>
              </div>
            </li>
          </div>
          <div className="live_hall_info vw_center_center" data-v-cec32a74="">
            <div className="vw_right_center flex1">
              <div className="vh_right_center">
                <p className="info_team_name text_ellip mgr-10">{zhuName}</p>
                <p className="vw_right_center mgr-10"></p>
              </div>
              <div className="el-image info_team_img">
                <img
                  className="el-image__inner"
                  src="https://static.fastbs55.com/68a92fb02286ceeec72fe783658b5d74.jpeg"
                />
              </div>
              <p className="info_team_score vw_right_center">0</p>
            </div>
            <div className="vh_center_center pdlr-10">
              <p className="info_game_time">{gameTime}</p>
              <p className="info_game_corner vw_center_center">
                <i className="iconfont icon-sport-list-corner info_game_corner_icon"></i>
                2-3
              </p>
            </div>
            <div className="vw_left_center flex1">
              <p className="info_team_score vw_left_center">1</p>
              <div className="el-image info_team_img">
                <img
                  className="el-image__inner"
                  src="https://static.fastbs55.com/data/f035db9d0e40f69c49c9217c3ef5b7b4.png"
                />
              </div>
              <div className="vh_left_center">
                <p className="info_team_name text_ellip mgl-10">{keName}</p>
                <p className="vw_left_center mgl-10">
                  <span className="card_info card_yellow">1</span>
                </p>
              </div>
            </div>
          </div>
        </div>
        <div>
          {/* <video
            src={videoSrc}
            style={{ width: 900 }}
            id="video-player_html5_api"
          /> */}
          <img
            src={videoSrc}
            style={{ width: 900 }}
            id="video-player_html5_api"
          />
          <div className="vjs-control vjs-button vjs-danmu-button"></div>
        </div>
      </div>

      <div className="el-tabs__header is-top">
        <div className="tabs__item is-top">
          <div className="collapse_btn ratate_180">展开收起按钮</div>
          <div className="el-collapse" style={{ marginRight: 30 }}>
            {dataPankou.map((item) => {
              return (
                <div
                  key={item.cate}
                  className="el-collapse-item is-active vh_center_center bet_area_markets"
                  id="M120425421"
                  data-v-240c2b78=""
                >
                  <div
                    role="tab"
                    aria-expanded="true"
                    aria-controls="el-collapse-content-9576"
                    aria-describedby="el-collapse-content-9576"
                  >
                    <div
                      id="el-collapse-head-9576"
                      className="el-collapse-item__header is-active"
                      role="button"
                    >
                      <div className="bet_title" data-v-240c2b78="">
                        <span data-v-240c2b78="">{item.cate}</span>
                        <i
                          className="iconfont icon_pining_off"
                          data-v-240c2b78=""
                        ></i>
                      </div>
                      <i className="el-collapse-item__arrow el-icon-arrow-right is-active"></i>
                    </div>
                  </div>
                  <div
                    id="el-collapse-content-9576"
                    className="el-collapse-item__wrap"
                    role="tabpanel"
                  >
                    <div className="el-collapse-item__content">
                      <div className="vw_center_center bet_area_btn">
                        {item.items.map((item) => {
                          return (
                            <button
                              key={item}
                              className="el-button el-button--default el-button--mini bet_btn flex1"
                              type="button"
                              onClick={() => showModal(item)}
                            >
                              <span>
                                <div className="vw_between_center">
                                  <p className="ellipsisMask1204254214">
                                    <span className="default_span type_face mglr-5 text_ellip">
                                      {item}
                                    </span>
                                  </p>
                                  <p>
                                    <span className="convention_span type_face">
                                      2.27
                                    </span>
                                  </p>
                                </div>
                              </span>
                            </button>
                          );
                        })}
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
      <Modal
        className="bet_dialog"
        title="开始下单"
        open={isModalOpen}
        onCancel={handleCancel}
        footer={null}
      >
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "start",
          }}
        >
          <p>投注的盘口：{currentPankou}</p>
          <input
            style={{ marginTop: 10 }}
            className="el-input__inner"
            type="text"
            placeholder="输入下注金额"
          />
          <button
            style={{ marginTop: 10 }}
            className="touzhu"
            onClick={handleOk}
          >
            投注
          </button>
          <div>
            投注结果：
            <div style={{ marginTop: 10 }}>{payMsg}</div>
          </div>

          <button className="bet_dialog_overlay" onClick={handleCancel}>
            结束按钮
          </button>
        </div>
      </Modal>
    </div>
  );
}
